<script setup>
import { reactive, ref, onMounted } from 'vue'
import { Folders } from '@/utils/api.js'
import wlsPopup from '@/components/common/wls-popup.vue'
const emit = defineEmits(['submitfl'])

const ruleFormRef = ref(null);
const fol = ref([]);
const isfl = ref(false);
const ruleForm = ref({
    name: ''
});
const rules = reactive({
    name: [
        {
            required: true,
            message: '请选择收藏夹',
            trigger: 'change',
        },
    ]
});


const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            emit('submitfl', ruleForm.value.name)
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields();
    isfl.value = false
}

const getFolders = async () => {
    let params = '?areaId=' + areaId + '&mobile=' + mobile;
    let res = await Folders(params);
    if (res.code == '200') {
        fol.value = res.data;
    }
}

const open = () => {
    isfl.value = true
}

const close = () => {
    resetForm(ruleFormRef.value)
}

let areaId = '', mobile = '';
onMounted(() => {
    areaId = window.sessionStorage.getItem('areaId');
    mobile = window.sessionStorage.getItem('mobile');
    getFolders()
})

defineExpose({ open, close })

</script>
<template>
    <wls-popup v-if="isfl">
        <div class="wls-u">
            <div class="d-lkb-c" @click.stop="resetForm(ruleFormRef)">
                <!-- <svg class="wls-icon" aria-hidden="true" style="width: .4rem;height: 0.4rem;">
                    <use xlink:href="#icon-guanbi"></use>
                </svg> -->
                <i class="icon iconfont icon-guanbi" style="font-size: .2rem;"></i>
            </div>
            <div class="wls-info-title">
                <div></div>
                <div><span>收藏</span></div>
            </div>
            <div style="height: 0.16rem;"></div>
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="top" class="demo-ruleForm"
                size="large">
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="选择收藏夹" prop="name">
                            <el-select v-model="ruleForm.name" style="width: 100%;" clearable placeholder="请选择收藏夹">
                                <el-option v-for="(i, index) in fol" :key="i.id" :label="i.folderName" :value="i.id" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div style="margin: 0.16rem 0;display: flex;align-items: center;justify-content: center;">
                <el-button type="primary" @click.stop="submitForm(ruleFormRef)">保存</el-button>
                <el-button @click.stop="resetForm(ruleFormRef)">取消</el-button>
            </div>
        </div>
    </wls-popup>
</template>
<style scoped>
.wls-u {
    width: 7rem;
    padding: .24rem;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}
</style>